<template>
  <div class="detail-progress-warpper">
    <el-table
      :data="tableData"
      :header-cell-style="{ background: '#F7F8FA' }"
      border
      class="table-box"
    >
      <el-table-column label="商品图" width="80">
        <template slot-scope="scope">
          <img :src="scope.row.push_goods_pic_url" alt="商品图片" style="max-width: 60px; max-height: 60px; border-radius: 8px;">
        </template>
      </el-table-column>
      <el-table-column label="商品信息" width="350">
        <template slot-scope="scope">
          <p>
            <span>{{ scope.row.push_goods_title }}</span>
          </p>
          <p style="margin-top: 8px;">
            <span><span style="color: #999999;">ID：</span><span style="color: #4E78EF;">{{ scope.row.push_update_goods_id }}</span></span>
            <i class="el-icon-copy-document" style="margin-left: 6px; cursor: pointer;" @click="copy(scope.row.push_update_goods_id)" />
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="goods_content_old" label="调整前内容" width="150" />
      <el-table-column prop="goods_content_new" label="调整后内容" />
    </el-table>

    <div class="list-pagina">
      <el-pagination
        background
        :page-size="100"
        layout="total, prev, pager, next"
        :total="1000"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { copyTool } from '../../../utils/tool'
export default {
  props: {
    tableData: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      pageInfo: {
        // 修改状态。0进行中 1成功 2失败 3跳过
        statusArr: [
          {
            label: '进行中',
            value: 0,
            color: '#FFA700'
          },
          {
            label: '成功',
            value: 1,
            color: '#16BE4F'
          },
          {
            label: '失败',
            value: 2,
            color: '#EE0000'
          },
          {
            label: '跳过',
            value: 3,
            color: '#999999'
          }
        ]
      },
      multipleSelection: []
    }
  },
  methods: {
    copy(val) {
      if (val) {
        copyTool(val)
        this.$message({ message: '复制成功', type: 'success' })
      } else {
        this.$message({ message: '无内容可复制', type: 'error' })
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  line-height: 17px;
}
.detail-progress-warpper {
  padding: 0 20px;
  .list-pagina {
    display: flex;
    justify-content: flex-end;
    margin-top: 17px;
    .list-handle {
      display: flex;
      align-items: center;
    }
    ::v-deep {
      .el-pagination.is-background {
        .el-pager li {
          background-color: #fff;
          border: 1px solid rgba(0,0,0,0.15);
          &:not(.disabled).active {
            color: #fff;
            background-color: #1890ff;
            border: none;
          }
        }
      }
      .btn-prev,
      .btn-next {
          background-color: #fff;
          border: 1px solid rgba(0,0,0,0.15);
      }
    }
  }
}
</style>
